<template>
	<view class="container">
		<steps 
			ref="step"
			apiname="getPermitLeaveAttend"
			:apiparam="apiparam"
			:typeCode="typeCode" 
			:brief="brief" 
			:notEmpty="checkBukaFiled"
			:disabled="disabled"
			:checkResult="checkResult"
			:insflowid="insflowid"
			@confirm="confirm">
			<view class="container__list">
				<view class="hover" hover-class="clickable" @click="showAttendType = true">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">请假类型</text>
					</view>
					<view class="container__list--value">
						{{attendType}}
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="container__left">
				<view class="" v-show="left">
					<text>{{attendType}}余额</text>
					<text>{{left}}{{unit}}</text>
				</view>
			</view>
			<view class="container__list" style="margin-top: 0;">
				<view class="hover" hover-class="clickable">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">开始时间</text>
					</view>
					<view class="container__list--time">
						<view class="container__list--time-text" @click="startShow">
							<text v-if="!startDateTime">请选择</text>
							<text v-else>{{startDateTime}}</text>
						</view>
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="container__list" style="margin-top: 0;">
				<view class="hover" hover-class="clickable">
					<view class="container__list--text">
						<text class="container__list--text-symbol">*</text>
						<text class="container__list--text-des">结束时间</text>
					</view>
					<view class="container__list--time">
						<view class="container__list--time-text" @click="endShow">
							<text v-if="!endDateTime">请选择</text>
							<text v-else>{{endDateTime}}</text>
						</view>
					</view>
					<view class="container__list--icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="container__list" style="padding: 10rpx 20rpx;margin-top: 0;">
				<view class="container__list--text">
					<text class="container__list--text-symbol">*</text>
					<text class="container__list--text-des">时长({{unit}})</text>
				</view>
				<view class="container__list--textarea">
					<input type="number" v-model="num" @blur="dateTimeInput"/>
				</view>
			</view>
			<view class="container__list" style="padding: 10rpx 20rpx;">
				<view class="container__list--text">
					<text class="container__list--text-symbol">*</text>
					<text class="container__list--text-des">请假事由</text>
				</view>
				<view class="container__list--textarea">
					<input type="text" v-model="content" placeholder="请输入" placeholder-style="font-size: 27rpx;color: #aaa;" />
				</view>
			</view>
		</steps>
		<datetime-picker ref="startDateTime" :type="dateTimePickerType" :border="false" returnType="date" v-model="startTime" hide-second @change="confirmStartDateTime" />
		<datetime-picker ref="endDateTime" :type="dateTimePickerType" :border="false" returnType="date" v-model="endTime" hide-second @change="confirmEndDateTime" />
		<!-- 请假类型弹窗 -->
		<pop-box>
			<u-popup :show="showAttendType" mode="bottom"  @close="showAttendType = false" @open="showAttendType = true">
				<view class="attend-type-pop">
					<view class="attend-type-pop__list" hover-class="clickable" v-for="item in attenTypeList" :key="item.id" @click="selectAttendType(item)">
						<view class="attend-type-pop__list--icon" :style="{'background-color': item.color}"></view>
						<view class="attend-type-pop__list--name">{{item.name}}</view>
						<view class="attend-type-pop__list--info" v-if="item.left">（剩余{{item.left}}{{item.unit}}）</view>
					</view>
				</view>
			</u-popup>
		</pop-box>
	</view>
</template>

<script>
	import Steps from '@/pages/home/child/add-attend-apply/components/steps.vue'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import DatetimePicker from '@/components/custom/datetime-picker/uni-datetime-picker.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	
	export default {
		components: {
			Steps,
			DatetimePicker,
			PopBox
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				user: _data.data('user_info'),
				pxid: _data.localData('userid'),
				startTime: '',
				endTime: '',
				startDateTime: '',
				endDateTime: '',
				content: '',
				num: 0,
				attendType: '年假',
				showAttendType: false,
				attenTypeList: [
					{
						name: '年假',
						left: 0,
						unit: '天',
						typeCode: 'NianJia',
						color: 'orange'
					},
					{
						name: '事假',
						typeCode: 'ShiJia',
						left: 0,
						unit: '小时',
						color: 'blue'
					},
					{
						name: '病假',
						typeCode: 'BingJia',
						left: 0,
						unit: '小时',
						color: 'red'
					},
					{
						name: '调休',
						left: 0,
						unit: '小时',
						typeCode: 'TiaoXiu',
						color: 'green'
					},
					{
						name: '产假',
						left: 0,
						unit: '天',
						typeCode: 'ChanJia',
						color: 'yellow'
					},
					{
						name: '陪产假',
						left: 0,
						unit: '天',
						typeCode: 'PeiChanJia',
						color: 'blue'
					},
					{
						name: '婚假',
						left: 0,
						unit: '天',
						typeCode: 'HunJia',
						color: 'green'
					},
					{
						name: '丧假',
						left: 0,
						unit: '天',
						typeCode: 'SangJia',
						color: 'orange'
					},
					{
						name: '哺乳假',
						left: 0,
						unit: '小时',
						typeCode: 'BuRuJia',
						color: 'orange'
					},
				],
				left: 0,//剩余天/小时数
				unit: '天',
				typeCode: 'NianJia',
				disabled: true,
				checkResult: '',
				dateTimePickerType: 'date',
				insflowid: ''
			}
		},
		onLoad(options) {
			let that = this;
			if(options.typecode) this.typeCode = options.typecode;
			if(options.data) {
				this.data = JSON.parse(options.data)
				this.insflowid = options.insflowid;
				this.startDateTime = this.data.StartTime;
				this.startTime = this.data.StartTime;
				this.endDateTime = this.data.EndTime;
				this.endTime = this.data.EndTime;
				this.typeCode = this.data.TypeCode;
				this.num = this.data.LeaveDays != '0' ? this.data.LeaveDays : this.data.LeaveHours;
				this.content = this.data.Reason;
				this.attenTypeList.forEach(item => {
					if(item.typeCode == this.typeCode) this.attendType = item.name
				})
				this.checkForm();
			}
			this.setAttend()
		},
		computed: {
			brief() {
				return '请假类型：' + this.attendType + '|' +'开始时间：' + this.startDateTime + '|' + '结束时间：' + this.endDateTime
			},
			checkBukaFiled() {
				return  this.startDateTime && this.endDateTime && this.content ? true : false;
			},
			apiparam() {
				let obj = {}
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						obj = {
							obsusername: this.obsusername,
							pxid: this.pxid,
							typecode: this.typeCode,
							leavehours: this.num,
							leavedays: "0"
						}
						break;
					default:
						obj = {
							obsusername: this.obsusername,
							pxid: this.pxid,
							typecode: this.typeCode,
							leavehours: "0",
							leavedays: this.num
						}
						break;
				}
				return obj
			}
		},
		methods: {
			startShow() {
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						this.startTime = this.startTime ? moment(this.startTime).format('YYYY-MM-DD HH:mm:ss') : moment().format('YYYY-MM-DD HH:mm') + ':00'
						break;
					default:
						this.startTime = this.startTime ? moment(this.startTime).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD');
						break;
				}
				this.startDateTime = this.startTime;
				this.checkForm();
				this.$refs.startDateTime.show();
			},
			endShow() {
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						this.endTime = this.endTime ? moment(this.endTime).format('YYYY-MM-DD HH:mm:ss') : moment().format('YYYY-MM-DD HH:mm') + ':00'
						break;
					default:
						this.endTime = this.endTime ? moment(this.endTime).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD');
						break;
				}
				this.endDateTime = this.endTime;
				this.checkForm();
				this.$refs.endDateTime.show()
			},
			confirmStartDateTime(e) {
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						this.startDateTime = moment(e).format('YYYY-MM-DD HH:mm:ss');
						break;
					default:
						this.startDateTime = moment(e).format('YYYY-MM-DD');
						break;
				}
				this.checkForm();
			},
			confirmEndDateTime(e) {
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						this.endDateTime = moment(e).format('YYYY-MM-DD HH:mm:ss');
						break;
					default:
						this.endDateTime = moment(e).format('YYYY-MM-DD');
						break;
				}
				this.checkForm();
			},
			/**
			 * 时长输入
			 * @param {Object} apiparam
			 */
			dateTimeInput(e) {
				this.num = e.detail.value;
			},
			/**
			 * 表单校验
			 */
			checkForm() {
				if(!this.startDateTime || !this.endDateTime) return;
				// this.num = this.num + '';
				// let decimal = this.num.split('.');
				// let decimalLength = decimal.length > 1 ? decimal[1].length : 0;
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						let diffMin = moment(this.endDateTime).diff(this.startDateTime,'m');
						let endHour = moment(this.startDateTime).add(this.num, 'h');//开始时间加时长小时数
						let diff = moment(endHour).diff(this.endDateTime,'m');//开始时间加时长小时数和结束时间之间间隔的分钟数
						if(diffMin < 0) {//开始时间大于结束时间
							this.disabled = true;
							this.checkResult = '开始时间不能大于结束时间';
							this.num = 0;
							break;
						}
						this.getLeaveHoursInTimeRange();
						break;
						
						if(this.num*1 <= 0) {//负数或0
							this.disabled = true;
							this.checkResult = '请假时长必须为正数';
							break;
						}
						if(decimalLength > 1) {//一位小时
							this.disabled = true;
							this.checkResult = '时长不能超过1位小数';
							break;
						}
						if(diff > 0) {//开始时间加时长大于结束时间
							this.disabled = true;
							this.checkResult = '请假时长超过时间范围';
							break;
						}
						this.disabled = false;
						break;
					default://其他
						let diffDays = moment(this.endDateTime).diff(this.startDateTime,'days');//开始时间和结束时间中间间隔天数
						if(diffDays < 0) {//年假开始时间大于结束时间
							this.disabled = true;
							this.checkResult = '开始时间不能大于结束时间';
							this.num = 0;
							break;
						}
						this.getLeaveDaysInDateRange();
						break;
						
						if(this.num*1 <= 0 || decimalLength > 0) {//年假时长输入负数或小数
							this.disabled = true;
							this.checkResult = '年假时长为正整数';
							break;
						}
						if(this.num > (diffDays + 1)) {//年假开始时间和结束时间中间天数和时长对比
							this.disabled = true;
							this.checkResult = '请假时长超过时间范围';
							break;
						}
						this.disabled = false;
						break;
				}
			},
			/**
			 * 根据日期范围获取请假天数
			 */
			getLeaveDaysInDateRange() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getLeaveDaysInDateRange',
						apiparam: {
							obsusername: this.obsusername,
							startdate: this.startDateTime,
							enddate: this.endDateTime
						},
						success(res) {
							if(res.length) {
								if(res[0].days == '0') {
									that.checkResult = '未排班或剩余年假时长为0';
									that.disabled = true;
									return
								}
								that.num = res[0].days;
								that.disabled = false;
							}
						}
					})
				})
			},
			/**
			 * 根据日期范围获取请假小时数
			 */
			getLeaveHoursInTimeRange() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getLeaveHoursInTimeRange',
						apiparam: {
							obsusername: this.obsusername,
							starttime: this.startDateTime,
							endtime: this.endDateTime
						},
						success(res) {
							if(res.length) {
								if(res[0].Hours == '0') {
									that.checkResult = '未排班或剩余时长为0';
									that.disabled = true;
									return
								}
								that.num = res[0].Hours;
								that.disabled = false;
							}
						}
					})
				})
			},
			/**
			 * 添加请假申请
			 * @param {Object} apiparam  接口参数
			 */
			leaveAttendApply(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'leaveAttendApply',
						code: 3,
						apiparam,
						success(res) {
							resolve()
						}
					})
				})
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam,
						success() {
							resolve()
						}
					})
				})
			},
			/**
			 * 点击提交按钮申请流程后的回调
			 * @param {Object} v 回调参数
			 */
			confirm(v) {
				let obj = {}
				switch(this.typeCode) {
					case 'TiaoXiu'://调休
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						obj = {
							obsusername: this.obsusername,
							pxid: this.pxid,
							insflowid: v.insflowid,
							reason: this.content,
							starttime: this.startDateTime,
							endtime: this.endDateTime,
							leavehours: this.num,
							leavedays: 0
						}
						break;
					default:
						obj = {
							obsusername: this.obsusername,
							pxid: this.pxid,
							insflowid: v.insflowid,
							reason: this.content,
							starttime: this.startDateTime,
							endtime: this.endDateTime,
							leavehours: 0,
							leavedays: this.num
						}
						break;
				}
				this.leaveAttendApply(obj).then(() =>{
					uni.showToast({
						title: '流程创建成功',
						icon: 'none'
					})
					this.trigFlowStepNotice({
						insflowid: v.insflowid,
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/child/leave-attend/index?data=' + JSON.stringify(v)
						})
					},500)
				})
				
			},
			/**
			 * 选择请假类型
			 */
			selectAttendType(v) {
				this.$refs.step.init();
				this.startDateTime = '';
				this.startTime = '';
				this.endTime = '';
				this.endDateTime = '';
				this.typeCode = v.typeCode;
				this.attendType = v.name;
				this.unit = v.unit;
				this.showAttendType = false;
				this.num = 0;
				this.left = 0;
				this.setAttend();
			},
			/**
			 * 根据请假类型设置相关信息
			 */
			setAttend() {
				this.attenTypeList.forEach(item => {
					if(item.typeCode == this.typeCode) this.unit = item.unit
				})
				switch(this.typeCode) {
					case 'NianJia'://年假
						this.dateTimePickerType = 'date';
						this.startTime = this.startTime ? this.startTime : moment().format('YYYY-MM-DD');
						this.endTime = this.endTime ? this.endTime : moment().format('YYYY-MM-DD');
						this.getUserLeftYearLeaveDays()
						break;
					case 'TiaoXiu'://调休
						this.dateTimePickerType = 'datetime';
						this.startTime = this.startTime ? this.startTime : moment().format('YYYY-MM-DD HH:mm') + ':00';
						this.endTime = this.endTime ? this.endTime : moment().format('YYYY-MM-DD HH:mm') + ':00';
						this.getUserLeftExtraHours()
						break;
					case 'ShiJia'://事假
					case 'BingJia'://病假
					case 'BuRuJia'://哺乳假
						this.dateTimePickerType = 'datetime';
						this.startTime = this.startTime ? this.startTime : moment().format('YYYY-MM-DD HH:mm') + ':00';
						this.endTime = this.endTime ? this.endTime : moment().format('YYYY-MM-DD HH:mm') + ':00';
						break;
					default: 
						this.dateTimePickerType = 'date';
						this.startTime = this.startTime ? this.startTime : moment().format('YYYY-MM-DD');
						this.endTime = this.endTime ? this.endTime : moment().format('YYYY-MM-DD');
						break;
				}
			},
			/**
			 * 获取用户本年年假剩余数量
			 */
			getUserLeftYearLeaveDays() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getUserLeftYearLeaveDays',
						apiparam: {
							obsusername: this.obsusername,
							pxid: this.pxid
						},
						success(res) {
							if(res.length) {
								that.left = res[0].LeftDays;
							}
						}
					})
				})
			},
			/**
			 * 获取用户本年加班时间剩余数量
			 */
			getUserLeftExtraHours() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getUserLeftExtraHours',
						apiparam: {
							obsusername: this.obsusername,
							pxid: this.pxid
						},
						success(res) {
							if(res.length) {
								that.left = res[0].LeftHours;
							}
						}
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow-x: hidden;
		padding-bottom: 90rpx;
		
		&__left {
			height: 60rpx;
			padding-left: 20rpx;
			display: flex;
			align-items: center;
			color: #007AFF;
		}
		
		&__list {
			background-color: #fff;
			margin-top: 30rpx;
			position: relative;
			
			&--text {
				
				&-symbol {
					color: red;
					margin: 0 5rpx;
				}
				
				&-des {
					font-size: 30rpx;
				}
				
			}
			
			&--time {
				font-size: 32rpx;
				color: #aaa;
				margin-left: 20rpx;
				position: relative;
				height: 60rpx;
			}
			
			&--textarea {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
			
			&--icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}
			
			&--value {
				display: flex;
				
				&-user {
					margin-right: 20rpx;
				}
			}
		}
		
		&__detail {
			
			&--title {
				font-size: 27rpx;
				line-height: 60rpx;
				padding-left: 20rpx;
			}
			
			&--head,&--item {
				margin: 0 40rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				border-radius: 5rpx;
				height: 80rpx;
				
				view {
					flex: 1;
					padding-left: 20rpx;
					font-size: 27rpx;
					
					&:first-child {
						border-right: 1rpx solid #eee;
					}
				}
			}
			
			&--item {
				color: #aaa;
				
			}
		}
		
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.hover {
		padding: 10rpx 20rpx;
	}
	
	.attend-type-pop {
		
		&__list {
			height: 100rpx;
			padding-left: 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			
			&--icon {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
</style>
